<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="showTel">查看联系方式</button>
    <!-- 写两个按钮，一个为修改名字，一个为修改年龄 --> 
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script lang ="ts">
    export default {
        name: 'Person',
        setup() {
            //setup函数中的this是undefined
            //数据原来是写在data()中，现在要写在setup()中。注意此时的name，tel和age不是响应式数据
            let name = '张三' 
            let age = 18
            let tel = '12345678901'

            //方法
            function showTel() {
                alert(tel)
            }
            function changeName() {
                name = 'zhangsan'//注意：这里的name确实修改了，但是name不是响应式数据，页面不会更新
            }
            function changeAge() {
                age += 1//注意：这里的age确实修改了，但是age不是响应式数据，页面不会更新
            }
            //返回一个对象，对象中的属性会作为组件的属性
            return {name,age,showTel,changeName,changeAge}

            //setup的返回值可以是一个渲染函数
            //return（）=>{return 'Hello World!'}
            //return () => 'Hello World!'
        }
    }
</script>

<style scoped>
.person {
    /* 背景颜色 */
    background-color: skyblue;
    /* 阴影 */
    box-shadow: 0 0px 10px;
    /* 圆角 */
    border-radius: 4px;
    padding: 20px; /* 内边距 */
}
button { 
    margin: 0 5px;
}
</style>


